<template>
	<div
		class="tools-bar-com w-12 h-fit fixed right-5 bottom-5 z-30 flex flex-col justify-center items-center">
		<transition>
			<div
				title="返回顶部"
				@click="backTop"
				v-show="backTopVisible"
				class="tool-item w-10 h-10 hover:border-blue-500 bg-white my-1 rounded-xl shadow-md cursor-pointer border-2 flex justify-center items-center">
				<icon class="text-blue-500" name="material-symbols:rocket" :size="20" />
			</div>
		</transition>
		<div
			title="切换主题"
			class="tool-item w-10 h-10 hover:border-blue-500 bg-white my-1 rounded-xl shadow-md cursor-pointer border-2 flex justify-center items-center">
			<icon class="text-blue-500" name="material-symbols:moon-stars" :size="18" />
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'ToolsBar',
	setup() {
		// 是否显示返回顶部按钮
		const backTopVisible = ref<boolean>(false);
		const backTop = (): void => {
			document.documentElement.scrollTop = 0;
			document.body.scrollTop = 0;
		};

		onMounted(() => {
			// 获取页面初始滚动高度
			const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop > 300) {
				backTopVisible.value = true;
			}

			addEventListener('scroll', () => {
				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 300) {
					backTopVisible.value = true;
				} else {
					backTopVisible.value = false;
				}
			});
		});

		return {
			backTopVisible,
			backTop,
		};
	},
});
</script>

<style lang="scss" scoped></style>
